@import './reset';
@import './setting';
@import './flex';
@import './nav';

@function getvw($w) {
    @return calc($w / 375) * 100+vw;
}

.container {
    width: getvw(375);
    @extend %columnCenter;

    header {
        width: 100%;
        margin-bottom: getvw(8);

        nav {
            font-weight: 500;
        }
    }

    main {
        width: getvw(345);
        @extend %columnCenter;
        padding-top: getvw(30);
        // background-color: antiquewhite;

        .logo {
            width: getvw(138);
            margin-bottom: getvw(35);
        }

        // form {
        //     width: 100%;
        //     @extend %columnCenter;

        ul {
            width: 100%;
            color: #555555ff;
            font-size: getvw(14);
            font-weight: 400;

            li {
                border-bottom: getvw(2) solid #e9ecf0ff;
                margin-bottom: getvw(17);

                input {
                    width: getvw(168);
                    padding: getvw(15) 0;
                    background-color: transparent;
                    border: none;
                    font-size: getvw(15);
                    outline: none;
                }

                div {
                    @extend %betweenCenter;

                    button {
                        margin-right: getvw(50);
                        background-color: transparent;
                        border: none;
                        color: #555555ff;
                        font-size: getvw(15);
                    }
                }
            }
        }

        a {
            width: 100%;

            .auCodeLogin {
                border: none;
                background-color: $themColor;
                width: 100%;
                height: getvw(45);
                margin-top: getvw(20);
                color: #ffffff;
                font-size: getvw(17.5);
            }
        }

        .pwdLogin {
            color: #555555ff;
            font-size: 17.5px;
            font-weight: 400;
            margin: getvw(30) 0 getvw(22);
            border: none;
            background-color: transparent;
        }
    }

    .other {
        width: getvw(300);
        @extend %betweenCenter;
        margin-bottom: getvw(22);

        p {
            color: #555555ff;
            font-size: getvw(14);
            font-weight: 400;
        }

        hr {
            border: none;
            height: getvw(1);
            width: 30%;
            background-color: #55555522;
        }
    }

    .otherIcon {
        width: getvw(300);
        @extend %aroundCenter;
        color: #555555ff;

        div {
            @extend %center;
            font-size: getvw(14);

            i {
                font-size: getvw(18);
                margin-right: getvw(7);
            }
        }

        // }
    }
}